<!DOCTYPE html>
<html lang="en" ng-app="a2firstlook" ng-cloak>

<head>
  <title>Angular 2 First Look</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
  <link rel="stylesheet" href="assets/angular-material.min.css" />
  <link rel="stylesheet" href="assets/app.css" />

  <style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
      display: none !important;
    }
  </style>
  <meta name="viewport" content="initial-scale=1" />
</head>

<body ng-controller="CardController as vm">

  <md-toolbar class="dark">
    <div class="md-toolbar-tools">
      <a class="md-title-icon" ng-href="http://pluralsight.com" target="_blank"><i></i></a>
      <h3>
        <span>Angular 2 First Look</span>
      </h3>
      <span flex=""></span>
      <div class="md-title-links hide-xs">
        <md-button class="md-accent md-hue-1 md-title-button" href="http://angular.io" target="_blank">Angular 2</md-button>
        <md-button class="md-accent md-hue-1 md-title-button" href="http://johnpapa.net" target="_blank">John Papa</md-button>
      </div>
    </div>
  </md-toolbar>


  <md-content flex>
    <p class="intro">The following are examples for the core fundamentals of Angular 2. Click the button to view each sample in a plunker.</p>
    <md-card ng-repeat="card in vm.cards">
      <md-toolbar class="md-primary md-hue-0 card-title">
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">{{card.id}}. {{card.title}}</span>
          </md-card-title-text>
        </md-card-title>
      </md-toolbar>
      <md-card-title>
        <md-card-title-text>
          <span class="md-subhead">{{card.summary}}</span>
        </md-card-title-text>
      </md-card-title>
      <md-card-actions layout="row" layout-align="end center">
        <md-button class="md-accent md-raised" ng-href="examples/{{card.example}}" target="_blank">View Sample
        </md-button>
      </md-card-actions>
    </md-card>
  </md-content>

  <script src="assets/angular.min.js"></script>
  <script src="assets/angular-animate.min.js"></script>
  <script src="assets/angular-aria.min.js"></script>
  <script src="assets/angular-material.min.js"></script>
  <script src="a2firstlook.module.js"></script>
  <script src="card.controller.js"></script>
  <script src="card.service.js"></script>

</body>

</html>